<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心血管疾病预测系统</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>心血管疾病预测系统</h1>
            <p>基于机器学习的心血管健康风险评估</p>
        </header>

        <nav>
            <ul>
                <li><a href="#prediction" class="active">疾病预测</a></li>
                <li><a href="#statistics">数据统计</a></li>

                <li><a href="#about">关于系统</a></li>
            </ul>
        </nav>

        <main>
            <section id="prediction" class="active-section">
                <h2>心血管疾病风险预测</h2>
                <div class="prediction-container">
                    <div class="form-container">
                        <form id="prediction-form">
                            <div class="form-group">
                                <label for="age">年龄</label>
                                <input type="number" id="age" min="1" max="120" required>
                            </div>
                            <div class="form-group">
                                <label for="sex">性别</label>
                                <select id="sex" required>
                                    <option value="1">男性</option>
                                    <option value="0">女性</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="cp">胸痛类型</label>
                                <select id="cp" required>
                                    <option value="0">典型心绞痛</option>
                                    <option value="1">非典型心绞痛</option>
                                    <option value="2">非心绞痛</option>
                                    <option value="3">无症状</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="trestbps">静息血压 (mm Hg)</label>
                                <input type="number" id="trestbps" min="80" max="200" required>
                            </div>
                            <div class="form-group">
                                <label for="chol">血清胆固醇 (mg/dl)</label>
                                <input type="number" id="chol" min="100" max="600" required>
                            </div>
                            <div class="form-group">
                                <label for="fbs">空腹血糖 > 120 mg/dl</label>
                                <select id="fbs" required>
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="restecg">静息心电图结果</label>
                                <select id="restecg" required>
                                    <option value="0">正常</option>
                                    <option value="1">ST-T波异常</option>
                                    <option value="2">左心室肥大</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="thalach">最大心率</label>
                                <input type="number" id="thalach" min="60" max="220" required>
                            </div>
                            <div class="form-group">
                                <label for="exang">运动诱发心绞痛</label>
                                <select id="exang" required>
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="oldpeak">ST段压低</label>
                                <input type="number" id="oldpeak" min="0" max="6" step="0.1" required>
                            </div>
                            <div class="form-group">
                                <label for="slope">峰值运动ST段斜率</label>
                                <select id="slope" required>
                                    <option value="0">上升</option>
                                    <option value="1">平坦</option>
                                    <option value="2">下降</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="ca">主要血管数量</label>
                                <select id="ca" required>
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="thal">地中海贫血</label>
                                <select id="thal" required>
                                    <option value="1">正常</option>
                                    <option value="2">固定缺陷</option>
                                    <option value="3">可逆缺陷</option>
                                </select>
                            </div>
                            <button type="submit" class="submit-btn">预测</button>
                        </form>
                    </div>
                    <div class="result-container">
                        <div id="prediction-result">
                            <h3>预测结果</h3>
                            <div class="result-content">
                                <p class="waiting-text">请填写左侧表单并点击预测按钮</p>
                            </div>
                            <div id="risk-bar" style="display: none;">
                                <div class="risk-label">风险水平：</div>
                                <div class="risk-progress">
                                    <div id="risk-progress-bar"></div>
                                </div>
                                <div id="risk-percentage">0%</div>
                            </div>
                            <div id="suggestions" style="display: none;">
                                <h4>健康建议：</h4>
                                <ul id="suggestions-list"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="statistics" style="display: none;">
                <h2>数据统计分析</h2>
                <div class="statistics-container">
                    <div class="stats-row">
                        <div class="stats-card">
                            <h3>总体患病率</h3>
                            <div id="prevalence-chart" class="chart"></div>
                        </div>
                        <div class="stats-card">
                            <h3>性别分布</h3>
                            <div id="gender-chart" class="chart"></div>
                        </div>
                    </div>
                    <div class="stats-row">
                        <div class="stats-card">
                            <h3>年龄分布</h3>
                            <div id="age-chart" class="chart"></div>
                        </div>
                        <div class="stats-card">
                            <h3>相关性分析</h3>
                            <div id="correlation-chart" class="chart"></div>
                        </div>
                    </div>
                    <div class="stats-card full-width">
                        <h3>预测历史</h3>
                        <table id="prediction-history">
                            <thead>
                                <tr>
                                    <th>年龄</th>
                                    <th>性别</th>
                                    <th>预测结果</th>
                                    <th>风险概率</th>
                                    <th>时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 预测历史数据将通过JavaScript动态添加 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>



            <section id="about" style="display: none;">
                <h2>关于系统</h2>
                <div class="about-container">
                    <h3>系统介绍</h3>
                    <p>本心血管疾病预测系统是一个基于机器学习的健康风险评估工具。系统使用公开的心血管疾病数据集（heart.csv）进行模型训练和预测，能够根据用户输入的生理指标预测其患有心血管疾病的风险。</p>
                    
                    <h3>数据说明</h3>
                    <p>数据集包含303个样本，涵盖了13个特征变量和1个目标变量。特征变量包括：</p>
                    <ul>
                        <li><strong>年龄</strong>：患者年龄</li>
                        <li><strong>性别</strong>：1表示男性，0表示女性</li>
                        <li><strong>胸痛类型</strong>：典型心绞痛、非典型心绞痛、非心绞痛、无症状</li>
                        <li><strong>静息血压</strong>：静息状态下的血压</li>
                        <li><strong>血清胆固醇</strong>：血清中胆固醇含量</li>
                        <li><strong>空腹血糖</strong>：空腹血糖是否大于120mg/dl</li>
                        <li><strong>静息心电图结果</strong>：正常、ST-T波异常、左心室肥大</li>
                        <li><strong>最大心率</strong>：运动达到的最大心率</li>
                        <li><strong>运动诱发心绞痛</strong>：运动是否诱发心绞痛</li>
                        <li><strong>ST段压低</strong>：心电图ST段压低程度</li>
                        <li><strong>峰值运动ST段斜率</strong>：上升、平坦、下降</li>
                        <li><strong>主要血管数量</strong>：造影显示的主要血管数量</li>
                        <li><strong>地中海贫血</strong>：正常、固定缺陷、可逆缺陷</li>
                    </ul>
                    
                    <h3>免责声明</h3>
                    <p>本系统仅作为健康风险评估工具，不能替代专业医生的诊断。如有身体不适，请及时就医。</p>
                </div>
            </section>
        </main>

        <footer>
            <p>&copy; 2023 心血管疾病预测系统 | 仅供研究和教育目的使用</p>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
</html>